import { Component } from 'react';
import { Route, Routes } from 'react-router-dom';
import Baidu from '../baidu/Baidu';
import './routerItem.scss';
import Comment from '../comment/Comment';
import MyLink from './myLink';
import Dome from '../demo/Demo';
class RouterItem extends Component {
  state = {};
  goComment() {
    console.log(this.props);
    // useNavigate('/comment')
    // Navigate('/comment', { replace: true });
  }
  render() {
    return (
      <div>
        路由练习
        <br />
        <MyLink replace={true} to="/baidu">
          去百度
        </MyLink>
        <br />
        <hr />
        {/* <MyLink replace={true} to="/comment" children="去评论" /> */}
        <button onClick={() => this.goComment()}>去评论</button>
        <hr />
        <hr />
        <div className="ff"></div>
        <hr />
        <MyLink replace={true} to="/dome" children="路由嵌套" />
        <hr />
        <hr />
        <hr />
        <hr />
        <hr />
        <hr />
        <Routes>
          <Route path="/" element={<Baidu />} />
          <Route path="/baidu" element={<Baidu />} />
          <Route path="/comment" element={<Comment />} />
          <Route path="/dome/*" element={<Dome />} />
        </Routes>
      </div>
    );
  }
}

export default RouterItem;
